import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:jet_rails/jr_app/jr_views/jr_discovery/jr_discovery_view.dart';
import 'package:jet_rails/jr_app/jr_views/jr_home/jr_home_view.dart';
import 'package:jet_rails/jr_app/jr_views/jr_main/jr_main_controller.dart';
import 'package:jet_rails/jr_app/jr_views/jr_user/jr_user_view.dart';
import 'package:jet_rails/jr_app/jr_views/jr_video/jr_video_controller.dart';
import 'package:jet_rails/jr_app/jr_views/jr_video/jr_video_view.dart';
import 'package:jet_rails/jr_app/jr_widgets/jr_blur_container.dart';

class JrMainView extends StatefulWidget {
  const JrMainView({super.key});

  @override
  State<JrMainView> createState() => _JrMainViewState();
}

class _JrMainViewState extends State<JrMainView> {
  Map<int, Widget> pages = {};

  late JrMainController controller;

  @override
  void initState() {
    controller = Get.put(JrMainController());
    super.initState();
  }

  @override
  void dispose() {
    Get.delete<JrMainController>();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Stack(children: [
      Obx(() {
        return IndexedStack(
          index: controller.currentIndex.value,
          children: tabs.map((e) => e.tabView).toList(),
        );
      }),
      Positioned(bottom: 0, right: 0, left: 0, child: buildBottomWidget())
    ]);
  }

  Widget buildBottomWidget() {
    return SafeArea(
        child: JrBlurContainer(
            height: 50.h,
            alignment: Alignment.topCenter,
            margin: const EdgeInsets.symmetric(horizontal: 16),
            decoration: BoxDecoration(
              color: Colors.white.withOpacity(0.3), // Adjust alpha for opacity
              borderRadius: BorderRadius.circular(8),
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: tabs.map((e) => e.tabItem).toList(),
            )));
  }
}

List<TabAndPage> tabs = [
  TabAndPage(
    tabItem: JrMainTabItem(
      index: 0,
      icon: Image.asset('assets/webp/icon_home.webp'),
      activeIcon: Image.asset('assets/webp/icon_home_active.webp'),
    ),
    tabView: const JrHomeView(title: 'Home'),
  ),
  TabAndPage(
    tabItem: JrMainTabItem(
      index: 1,
      icon: Image.asset('assets/webp/icon_video.webp'),
      activeIcon: Image.asset('assets/webp/icon_video_active.webp'),
    ),
    tabView: const JrVideoView(),
  ),
  TabAndPage(
    tabItem: JrMainTabItem(
      index: 2,
      icon: Image.asset('assets/webp/icon_discovery.webp'),
      activeIcon: Image.asset('assets/webp/icon_discovery_active.webp'),
    ),
    tabView: const JrDiscoveryView(),
  ),
  TabAndPage(
    tabItem: JrMainTabItem(
      index: 3,
      icon: Image.asset('assets/webp/icon_user.webp'),
      activeIcon: Image.asset('assets/webp/icon_user_active.webp'),
    ),
    tabView: const JrUserView(),
  ),
];

class TabAndPage {
  final Widget tabItem;
  final Widget tabView;

  TabAndPage({required this.tabItem, required this.tabView});
}

class JrMainTabItem extends StatefulWidget {
  const JrMainTabItem({
    super.key,
    required this.index,
    required this.icon,
    required this.activeIcon,
  });

  final int index;
  final Widget icon;
  final Widget activeIcon;

  @override
  State<JrMainTabItem> createState() => _JrMainTabItemState();
}

class _JrMainTabItemState extends State<JrMainTabItem> {
  JrMainController controller = Get.find<JrMainController>();

  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Obx(() {
      bool isActive = controller.currentIndex.value == widget.index;
      Widget icon = SizedBox(height: 24, width: 24, child: isActive ? widget.activeIcon : widget.icon);
      if (isActive) {
        icon = Container(
          height: 39,
          width: 67,
          padding: const EdgeInsets.all(4),
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(12),
          ),
          child: Center(
            child: icon,
          ),
        );
      }
      return Expanded(
        child: GestureDetector(
          behavior: HitTestBehavior.opaque,
          onTap: () {
            controller.currentIndex.value = widget.index;
            // video page
            try {
              final videoPlayer = Get.find<JrVideoController>().ttVideoListController?.currentPlayer;
              if (widget.index != 1) {
                videoPlayer?.pause();
              } else {
                videoPlayer?.play();
              }
            } catch (e) {}
          },
          child: Center(
            child: icon,
          ),
        ),
      );
    });
  }
}
